<template>
  <div class="home_content">
    <div class="header">
         <hader_top></hader_top>
    </div>
    <!-- 左侧导航区域 -->
    <div class="navbar"><hader_left></hader_left></div>
    <!-- 右侧主区域 -->
    <div class="main">
         <hader_right></hader_right>
    </div>

  </div>
</template>
<script>
import hader_top from "../components/home_hade/Hader_top";
import hader_left from "../components/home_hade/Hader_left";
import hader_right from "../components/home_hade/Hader_right";
export default {
  components: {
    hader_top,
    hader_left,
    hader_right,
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>
<style  scoped>
* {
  margin: 0px;
  padding: 0px;
}
.home_content {
  width: 99.85%;
  background: #ffffff;
}

.header
{
  position: absolute;
  line-height:20px;
  padding:0px;
  top: 0px;
  left:0px;
  right:0px;
  background-color:	#4384ba;
  /* background-color:#2d3a4b; */
}

.navbar
{
  position: absolute;
   width:230px;
  /* padding:0px; */
  top: 50px;
  left:0px;
  right:0px;
  bottom:0px;
  overflow-y:auto;
   background-color:#2d3a4b;
    /* background-color:#4bcad8; */
}

.main
{
   position: absolute;
   top:50px;
   left:230px;
   right:0px;
   bottom:0px;
   padding:10px;
   overflow-y:auto;
   background:gainsboro;
}
</style>